<template>
  <div>
    <el-dialog v-dialogDrag
      title="登录"
      :visible = "dialogVisible"
      v-model="dialogVisible"
      :width="'600px'"
      custom-class="dialog-style"
      @close='toogleDialog(false)'
      center>
      <!-- 扫描二维码 -->
      <div class='login-scan' v-show='showQrFlag'>
        <div class="clearfix">
          <div class="login-left fl ml80"></div>
          <div class="login-right fr mr40">
            <h3 class='fs18 fw500'>扫码登录</h3>
            <div class='posi-rel'>
              <img :src=qrcode alt="" class='qrcode disinblock'>
              <div class='posi-ab out-dated-qr' v-if='qrCodeOutDateFlag'>
                <el-button type="danger" round @click='refreshQrCode()'>点击刷新</el-button>
              </div>
            </div>
            <div>
              使用
              <a href="" class="login-app-link">网易云音乐APP</a>
              登录
            </div>
          </div>
        </div>
        <div class="login-bottom t-a-c">
          <el-button round class='mt30' @click='showLoginList(true)'>选择其他方式登录</el-button>
        </div>
      </div>
      <!-- 其他方式登录 -->
      <div class='login-list' v-show='showLoginListFlag'>
        <other-login-methods
          @showQrCode='showQrCode'
          @showLoginList='showLoginList'
          @showPhoneLogin='showPhoneLogin'
          @showRegister='showRegister'
        ></other-login-methods>
      </div>
      <!-- 手机号登录 -->
      <div class="phone-login" v-show='showPhoneLoginFlag'>
        <phone-login @showPhoneLogin='showPhoneLogin' @showLoginList='showLoginList'
          @showRegister='showRegister' @toogleDialog='toogleDialog'></phone-login>
      </div>
      <!-- 注册 -->
      <div class="register-list" v-show='showRegisterListFlag'>
        <register-list @showRegister='showRegister' @showLoginList='showLoginList'></register-list>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import otherLoginMethods from './otherLoginMethods'
import phoneLogin from './phoneLogin'
import registerList from './registerList'
import store from '../../store'
export default {
  name: 'loginDialog',
  props: ['dialogVisible', 'toogle'],
  data() {
    return {
      qrcode: '',
      qrKey: '',
      timeInterval: 0,
      showQrFlag: true,
      showLoginListFlag: false,
      showPhoneLoginFlag: false,
      showRegisterListFlag: false,
      userInfo: '',
      qrCodeOutDateFlag: false
    }
  },
  watch: {
    // 每次打开弹框默认显示二维码页面
    dialogVisible(val) {
      if (!val) {
        this.showQrFlag = true
        this.showLoginListFlag = false
        this.showPhoneLoginFlag = false
        this.showRegisterListFlag = false
        window.clearInterval(this.timeInterval)
      } else {
        this.showQrFlag && this._getQr()
        this.timeInterval = window.setInterval(() => {
          this._getQrCodeStatus()
        }, 1000)
      }
    },
    showLoginListFlag(val) {
      if (val) {
        window.clearInterval(this.timeInterval)
      }
    },
  },
  methods: {
    toogleDialog(flag, isLogin) {
      this.$emit('toogle', flag, isLogin)
    },
    // 生成二维码
    async _getQr() {
      let params = {
        timeStamp: new Date().valueOf() // 参数带时间戳
      }
      try {
        let res = await this.$api.getQrKey(params)
        if (res.status == 200) {
          this.qrKey = res.data.data.unikey
        }

        let params1 = {
          key: this.qrKey,
          qrimg: '二维码',
          timeStamp: new Date().valueOf()
        }
        res = await this.$api.getQrCode(params1)
        if (res.status == 200) {
          this.qrcode = res.data.data.qrimg
        }
      } catch(error) {
        console.log(error)
      }
    },
    refreshQrCode() {
      this._getQr().then(() => {
        this.qrCodeOutDateFlag = false
      })
    },
    // 查询二维码状态
    async _getQrCodeStatus() {
      let params = {
        key: this.qrKey,
        timeStamp: new Date().valueOf()
      }
      try {
        let res = await this.$api.getQrCodeStatus(params)
        // 800为二维码过期,801为等待扫码,802为待确认,803为授权登录成功(803状态码下会返回cookies)
        switch(res.data.code) {
          case 803: 
            console.log('授权成功！！')
            window.clearInterval(this.timeInterval)
            this.toogleDialog(false, true)
            store.dispatch('user/getLoginStatus')
            break;
          case 800:
            console.log('二维码过期!')
            this.qrCodeOutDateFlag = true
            break;
          default:
            break;
        }
      } catch(error) {
        console.log(error)
      }
    },
    showQrCode(flag) {
      this.showQrFlag = flag
      this.showLoginListFlag = false
      this.showPhoneLoginFlag = false
      this.showRegisterListFlag = false
    },
    showLoginList(flag) {
      this.showLoginListFlag = flag
      this.showQrFlag = false
      this.showPhoneLoginFlag = false
      this.showRegisterListFlag = false
    },
    showPhoneLogin(flag) {
      this.showPhoneLoginFlag = flag
      this.showRegisterListFlag = false
      this.showLoginListFlag = false
      this.showQrFlag = false
    },
    showRegister(flag) {
      this.showRegisterListFlag = flag
      this.showPhoneLoginFlag = false
      this.showLoginListFlag = false
      this.showQrFlag = false
    },
    
  },
  components: {
    otherLoginMethods,
    phoneLogin,
    registerList
  }
}
</script>

<style lang='less'>
  .dialog-style {
    .el-dialog__header {
      background-color: #2d2d2d;
      text-align: left;
      padding: 15px 20px;
      .el-dialog__title {
        color: #fff;
        font-weight: 800;
      }
    }
    .el-dialog__body {
      font-size: 12px;
    }
  }
  .login-scan {
    width: 100%;
    height: 300px;
    .login-left {
      width: 125px;
      height: 220px;
      background: url(../../assets/qr_guide.png);
      background-size: contain;
    }
    .login-right {
      width: 180px;
      height: 180px;
      margin-left: 30px;
      text-align: center;
      .login-app-link {
        color: #0c73c2;
        margin: 0 10px;
      }
      .out-dated-qr {
        width: 100%;
        height: 100%;
        background:rgba(0, 0, 0, 0.6);
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .login-bottom {
      margin: 0 auto;
    }
  }
  .login-list {
    width: 100%;
    height: 300px;
  }
</style>
